
import '../App.css';
import ItemDemo from './demo1'
import Count from './demo2'
import { useState, useRef,createContext, useContext,useEffect } from 'react'

function Son(props){
  console.log('props',props)
  const sonMsg = 'this is son msg'
  return <div onClick={()=>props.onGetSonMsg(sonMsg)}>
    <span>this is input {props.name}++{props.children}</span>
  </div>
}
function SonTwo(props){
  console.log('props',props)
  return <div>
    <span>this is sonTwo {props.name}</span>
  </div>
}
const MsgContext = createContext()
function A(){
  return (
    <div>
      this is A
      <B/>
    </div>
  )
}
function B(){
  const msg = useContext(MsgContext)
  return (
    <div>
      this is B{msg}
    </div>
  )
}
function App() {
  useEffect(()=>{
    console.log('useEffect')
  },[])
  const [value, setValue] = useState('')
  const [myArray, setMyArray] = useState([]);

  const [num, setNum] = useState(myArray.length)
  const addItem = (name) => {
    setNum(num + 1)
    const date = new Date();
    let eve = {
      name: name,
      content: value,
      time: '2023-12-19'
    }
    // 创建一个新的数组副本，并添加新的元素
    const newArray = [...myArray, eve];
    // // 使用更新函数来更新数组
    setMyArray(newArray);
    setValue('')
  };
  const clear = () =>{
    setValue('')
  }
  const del = (index) =>{
    setNum(num - 1)
    myArray.splice(index,1)
    console.log(index,'删除成功')
    setMyArray(myArray);
  }
  const [typeNUm, setTypeNum] = useState(0)
  const change = (num) =>{
    console.log(num)
    setTypeNum(num)
  }
  const inputRef = useRef(null)
  const btnStyle = {
    color:'red'
  }
  const getMsg = (msg) =>{
      setMssage(msg)
      console.log('msg', msg)
  }
  const [mssage,setMssage] = useState()
  const name = '张三'


  function useToggle(){
    const [bool,setBool] = useState(true)
    const toggle = () =>setBool(!bool)
    console.log('这里是点击显示隐藏',bool)
    return {
      bool,toggle
    }
  }
  const {bool, toggle} = useToggle()
  return (
    <div>
      <Son name={name} onGetSonMsg={getMsg}>
        <span>我18岁</span>
      </Son>
      <SonTwo name={mssage}/>
      <div>
        评论
        <span>{num}</span>
      </div>
      <div className='flex'>
        <div onClick={()=>change(0)} className={typeNUm == 0?'active':''}>最新</div>
        <div onClick={()=>change(1)} className={typeNUm == 1?'active':''}>最热</div>
      </div>
      <div>
        <input type='text' value={value} onChange={(e)=>setValue(e.target.value)}></input>
        <div className='btn' onClick={() => addItem('name')}>发布</div>
        <div className='btn' onClick={() => clear()}>清空内容</div>
      </div>
      <div className='item-box'>
        {myArray.map((item, index) => <ItemDemo item={item} key={index} onDel={del}/> )}
      </div>
      <MsgContext.Provider value={mssage}>
          this is App
          <A/>
      </MsgContext.Provider>
      <button onClick={toggle}>显示隐藏</button>
      { bool && <div>这里是显示隐藏</div> }
      <Count/>
    </div>
  )
}

export default App;
